.houses {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .home-nav {
    box-shadow: 0rpx 2rpx 9rpx 1rpx rgba(188, 188, 192, 0.18);
    z-index: 1;
    position: relative;

    .nav-tab {
      display: flex;
      align-items: center;

      .back-wrapper {
        padding: 10rpx 40rpx;
        display: flex;

        .back {
          width: 20rpx;
          height: 34rpx;
        }
      }

      .tab-name {
        font-size: 24rpx;
        color: #7d7d7d;
        transition: all 0.1s linear;
        padding: 10rpx 0;
      }

      .tab-name-one {
        margin-right: 34rpx;
      }

      .tab-name-active {
        font-size: 34rpx;
        color: #0e0e0e;
        font-weight: 700;
      }
    }
  }

  .show-content-wrapper {
    flex: 1;
    height: 0;

    .show-content {
      height: 100%;
      position: relative;
    }

    .show-content {
      .go-subscribe {
        width: 498rpx;
        height: 91rpx;
        line-height: 91rpx;
        background-image: linear-gradient(
            -45deg,
            rgba(11, 209, 223, 1) 0%,
            rgba(11, 209, 223, 1) 100%
          ),
          linear-gradient(#0bd1df, #0bd1df);
        background-blend-mode: normal, normal;
        box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(11, 209, 223, 0.8);
        border-radius: 45rpx;
        position: absolute;
        bottom: 12.744vh;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30rpx;
        color: #ffffff;
        padding: 0;
        font-weight: 500;
        text-align: center;
      }

      .go-subscribe .van-icon {
        top: 4rpx;
        right: 13rpx;
      }
    }
  }

  .list-wrapper {
    width: 100%;
    height: 100%;

    .list-item-inner {
      padding: 0 25rpx;
    }

    .list-item-inner:first-child {
      padding-top: 25rpx;
    }

    .list-item-inner {
      .list-item {
        background-color: #ffffff;
        box-shadow: 0rpx 2rpx 8.5rpx 0.5rpx rgba(188, 188, 192, 0.18);
        border-radius: 24rpx;
        padding: 38rpx 32rpx 59rpx 30rpx;
        margin-bottom: 25rpx;
        position: relative;

        .i-l {
          .t-name {
            font-size: 20rpx;
            color: #cfcfcf;
            margin-bottom: 14rpx;
          }

          .w-world {
            font-size: 28rpx;
            color: #000000;
            font-weight: 700;
          }

          .t-world {
            margin-bottom: 20rpx;
          }
        }

        .i-r {
          position: absolute;
          right: 32rpx;
          top: 50%;
          transform: translateY(-50%);
          width: 150rpx;
          height: 150rpx;
        }

        .i-r-btn {
          padding: 14rpx 36rpx;
          background-color: #e8f2ff;
          border-radius: 25rpx;
          font-size: 24rpx;
          color: #0768e2;
          position: absolute;
          right: 32rpx;
          top: 50%;
          transform: translateY(-50%);
        }

        .btn-ing {
          background-color: #fff8e8;
          color: #f0b62b;
        }

        .btn-overdue {
          background-color: #f4f4f4;
          color: #c1c1c1;
        }
      }
    }
  }

  .dwellContent-view {
    padding: 15rpx 25rpx 0;

    .dwellContent-list {
      padding: 25rpx;
      border-radius: 8rpx;
      background: #fff;

      .list-info {
        display: flex;
        justify-content: start;

        .houseUse {
          position: relative;
          top: 0;
          left: 0;
          width: 120rpx;
          height: 120rpx;
          margin-right: 20rpx;

          text {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            text-align: center;
            background: #0bd1df;
            border-radius: 18rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
          }
        }

        .toNext {
          flex: 1;
          text-align: right;
          margin-top: 7px;

          image {
            width: 44rpx;
            height: 44rpx;
          }
        }

        image {
          width: 100%;
          height: 100%;
        }

        .villageName {
          padding-right: 20rpx;
          font-size: 30rpx;
          font-weight: bold;
        }

        .address {
          color: #666;
          font-size: 28rpx;
        }
      }

      .personList {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        padding-bottom: 15rpx;

        .personImg {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }

        .personImg:not(:first-child) {
          margin-left: -40rpx;
        }

        .num {
          padding: 3rpx 11rpx;
          color: #fff;
          background: #f85f69;
          border-radius: 50%;
        }
      }
    }
  }
  .submit-btnblue {
    margin: 40rpx auto;
  }
}
